<!--
 * @Description: 登录日志
 * @Author: 杨帆
-->
<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="handleReset">
      <x-filter-item :label="$t('maintain.loginLog.username')">
        <el-input
          v-model="searchParams.username"
          :placeholder="$t('maintain.loginLog.usernamePlaceholder')"
          clearable
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('maintain.loginLog.nickName')">
        <el-input
          v-model="searchParams.nickName"
          :placeholder="$t('maintain.loginLog.nickNamePlaceholder')"
          clearable
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('maintain.loginLog.loginState')">
        <x-select
          :placeholder="$t('common.all')"
          v-model="searchParams.state"
          :options="dictOptions['upms_log_login.state']"
          style="width: 100%"
          clearable
        ></x-select>
      </x-filter-item>
    </x-filter>
    <!--数据面板-->
    <x-data>
      <!--数据面板按钮插糟-->
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <el-button
              type="primary"
              v-hasPermi="['upms:loginLog:export']"
              :icon="buttonIcons('export')"
              @click="handleExport(exportUrl)"
            >
              {{ $t('common.export') }}
            </el-button>
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <!-- 数据表格 -->
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <x-state-cell
              v-if="item.prop === 'state'"
              :stateClass="scope.row[item.prop] === 0 ? 'gray' : scope.row[item.prop] ? 'success' : ''"
              :text="selectDictLabel(dictOptions['upms_log_login.state'], scope.row[item.prop] + '')"
            />
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
      </x-table>
    </x-data>
  </x-page>
</template>
<script>
  // import { QueryDictMixin, TableListMixin } from '@/common/mixins/index.js'
  import { selectDictLabel, buttonIcons, QueryDictMixin, TableListMixin } from '@package/utils'
  import { mapState } from 'pinia'
  import { pinias } from '@/common/pinia/index.js'
  import { columns, stateOption } from '../config/loginLog.js'
  import { exportUrl, listUrl } from '../api/loginLog.js'

  const { login } = pinias

  export default {
    name: 'LoginLog',
    mixins: [TableListMixin, QueryDictMixin],
    data() {
      return {
        columns,
        stateOption,
        listUrl,
        exportUrl,
        searchParams: {
          username: '',
          nickName: '',
          state: ''
        },
        statusOptions: [],
        tableColumns: [],
        tableData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1
        },
        selectionData: [],
        dictKeys: ['upms_log_login.state']
      }
    },
    computed: {
      ...mapState(login, ['user'])
    },
    methods: {
      buttonIcons,
      selectDictLabel,
      handleSearch(val) {
        this.queryParam = { ...this.searchParams, ...val }
        this.loadData()
      },
      /**
       * 重置查询
       *
       */
      handleReset() {
        this.searchParams = {
          username: '',
          nickName: '',
          state: ''
        }
        this.resetSearch()
      },
      /**
       * 列表选中数据
       *
       */
      handleSelectionChange(data) {
        this.selectionData = data
      }
    }
  }
</script>
